<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 系统电影管理列表
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-form :model="query" :inline="true">
                    <el-form-item label="电影名:">
                        <el-input v-model="query.name"  class="handle-input mr10"></el-input>
                    </el-form-item>
                    <el-form-item label="电影类型:">
                        <el-select v-model="query.type" class="handle-select mr10">
                            <el-option v-for="(item,index) in types" :key="index" :value="item.typename">
                                {{item.typename}}
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="电影状态:">
                        <el-select v-model="query.status" class="handle-select mr10">
                            <el-option value="首映" >首映</el-option>
                            <el-option value="在映" >在映</el-option>
                            <el-option value="已撤档" >已撤档</el-option>
                            <el-option value="即将上映" >即将上映</el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" @click="handleBtnQuery()">搜索</el-button>
                    </el-form-item>
                </el-form>

                <el-button
                        type="primary"
                        icon="el-icon-plus"
                        class="handle-select"
                        @click="handleadd()"
                >添加电影</el-button>
                <el-button
                        type="danger"
                        icon="el-icon-delete"
                        class="handle-del mr10"
                        @click="delAllSelection()"
                >删除电影</el-button>
                <el-button
                        type="primary"
                        icon="el-icon-refresh"
                        class="handle-select"
                        @click="handlerefresh()"
                >刷新列表</el-button>
            </div>

            <el-table
                :data="tableData"
                border
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header"
                @selection-change="handleSelectionChange"
            >
                <el-table-column
                        type="selection"
                        width="55"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="movieid"
                        label="ID"
                        width="55"
                        align="center" >
                </el-table-column>
                <el-table-column
                        prop="moviedetails.moviechinesename"
                        label="电影名"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="moviedetails.movieforeignname"
                        label="外文名"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="moviedetails.movieorigin"
                        label="产地"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="movietypes[0].typename"
                        label="电影类型"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="moviedetails.moviereleasedata"
                        label="上映时间"
                        align="center">
                </el-table-column>
                <el-table-column prop="moviestatus" label="状态" align="center">
                    <template slot-scope="scope">
                        <p v-if="scope.row.moviestatus=='1'" style="font-size: larger ;color: green">首映</p>
                        <p v-else-if="scope.row.moviestatus=='2'" style="font-size: larger ;color: brown">在映</p>
                        <p v-else-if="scope.row.moviestatus=='3'" style="font-size: larger ;color: red">已撤档</p>
                        <p v-else-if="scope.row.moviestatus=='4'" style="font-size: larger ;color: blue">即将上映</p>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="230" align="center">
                    <template slot-scope="scope">
                        <el-row>
                            <el-button
                                    type="text"
                                    icon="el-icon-upload2"
                                    class="grenn"
                                    @click="handleEditstatusup(scope.$index,scope.row)"
                            >上架</el-button>
                            <el-button
                                    type="text"
                                    icon="el-icon-download"
                                    class="red"
                                    @click="handleEditstatusdown(scope.$index,scope.row)"
                            >下架</el-button>
                        </el-row>
                        <el-row>
                            <el-button
                                    type="text"
                                    icon="el-icon-edit"
                                    style="color: crimson"
                                    @click="handleedit(scope.$index,scope.row)"
                            >修改电影</el-button>
                            <el-button
                                    type="text"
                                    icon="el-icon-document"
                                    style="color: blue"
                                    @click="showMoviedetails(scope.$index,scope.row)"
                            >详情</el-button>
                        </el-row>
                    </template>
                </el-table-column>
            </el-table>

            <div class="pagination">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="query.currentPage"
                        :page-sizes="[15, 30, 50, 100]"
                        :page-size="query.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="currentTotal"
                ></el-pagination>
            </div>


        </div>

        <!-- 添加影片弹出框 -->
        <el-dialog title="添加影片" :visible.sync="addVisible" width="45%">
            <span slot="header" class="el-dialog__header">
            </span>
            <span solt="" class="el-dialog__body">
                <el-form :inline="false"
                         ref="addForm"
                         :model="addform"
                         label-width="100%"
                         :rules="rules">
                    <el-col :span="12">
                    <el-form-item
                            label="电影名称"
                            prop="moviechinesename"
                            label-width="80px">
                        <el-input
                                v-model="addform.addmoviechinesename"
                                placeholder="请输入中文名称"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item
                            label="英文名称"
                            prop="movieforeginname"
                            label-width="80px">
                        <el-input
                                v-model="addform.addmovieforeginname"
                                placeholder="请输入英文名称" ></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item
                            label="电影时长"
                            prop="movieduration"
                            label-width="80px">
                        <el-input
                                v-model="addform.addmovieduration"
                                placeholder="请输入时长">
                            <span></span>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item
                            label="上映时间"
                            prop="moviereleasedata"
                            label-width="80px">
                        <el-date-picker
                                v-model="addform.addmoviereleasedata"
                                type="date"
                                placeholder="请选择日期"
                                @change="getTime">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col>
                    <el-form-item
                            label="产地"
                            prop="movieorigin"
                            label-width="80px">
                        <el-input
                                v-model="addform.addmovieorigin"
                                placeholder="请输入产地（区域）"></el-input>
                    </el-form-item>
                </el-col>
                <el-col>
                    <el-form-item
                            label="电影类型"
                            label-width="80px">
                        <el-select
                                v-model="addform.addtype"
                                class="handle-select mr10"
                                placeholder="请电影类型">
                            <el-option
                                    v-for="(item,index) in types" :key="index" :value="item.typename">
                                {{item.typename}}
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item
                            label="导演"
                            prop="directorname"
                            label-width="80px">
                        <el-input
                                v-model="addform.adddirectorname"
                                placeholder="请输入导演并上传照片">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item
                            label="导演照片"
                            prop="directorpicture"
                            label-width="80px">
                        <el-input
                                v-model="addform.adddirectorpicture"
                                type="file"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item
                            label="演员"
                            prop="actorname"
                            label-width="80px">
                        <el-input
                                v-model="addform.addactorname"
                                placeholder="请输入演员并上传照片"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item
                            label="演员照片"
                            prop="actorpicture"
                            label-width="80px">
                        <el-input
                                v-model="addform.addactorpicture"
                                type="file"></el-input>
                    </el-form-item>
                </el-col>
                <el-col>
                    <el-form-item
                            label="影片图集"
                            prop="addatlas"
                            label-width="80px">
                        <el-input
                                v-model="addform.addatlas"
                                type="file"
                                placeholder="上传电影图集"></el-input>
                    </el-form-item>
                </el-col>
                <el-col>
                    <el-form-item
                            label="影片简介"
                            prop="moviesynopsis"
                            label-width="80px">
                        <el-input
                                type="textarea"
                                v-model="addform.addmoviesynopsis"
                                placeholder="影片的简单介绍"></el-input>
                    </el-form-item>
                </el-col>

                </el-form>
            </span>
            <span slot="footer" class="el-dialog__footer">
                <el-button @click="addVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirmAdd()">确 认 添 加</el-button>
             </span>
        </el-dialog>

        <!--修改影片弹出框-->
        <el-dialog title="修改影片" :visible.sync="editVisible" width="55%">
            <el-form ref="form" label-width="70px">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="电影编号">
                            <el-input v-model="editform.moviedetailsid"
                                      readonly="readonly"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="电影产地">
                            <el-input v-model="editform.movieorigin" ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="电影类型">
                            <el-select  v-model="edittype" class="handle-select mr10">
                                <el-option
                                        v-for="(item,index) in types" :key="index" :value="item.typename">
                                    {{item.typename}}
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="电影名称">
                            <el-input v-model="editform.moviechinesename" ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="英文名称">
                            <el-input v-model="editform.movieforeignname"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="电影时长（分钟）">
                            <el-input v-model="editform.movieduration"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="上映时间">
                            <el-date-picker
                                    v-model="editform.editmoviereleasedata"
                                    type="date"
                                    placeholder="请选择日期"
                                    @change="geteditTime">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-form-item label="导演">
                        <el-input v-model="director" readonly="readonly"></el-input>
                    </el-form-item>
                    <el-form-item label="演员">
                        <el-input v-model="actor" readonly="readonly"></el-input>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item label="影片简介">
                        <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 8}"
                                  v-model="editform.moviesynopsis"></el-input>
                    </el-form-item>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirmEdit()">确 定 修 改</el-button>
            </span>
        </el-dialog>


        <!--影片详情框-->
        <el-dialog title="影片详情" append-to-body :visible.sync="showMd" width="75%">
            <el-table
                    :data="form"
                    style="width: 100%">
                <el-table-column
                        prop="movieid"
                        label="电影ID"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="moviedetails.moviechinesename"
                        label="电影名"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="moviedetails.movieforeignname"
                        label="外文名"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="moviedetails.movieorigin"
                        label="产地"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="moviedetails.movieduration"
                        label="影片时长"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="moviedetails.moviereleasedata"
                        label="上映时间"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="boxoffice"
                        label="影片票房（万）"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="exceptedcount"
                        label="热度值"
                        align="center" >
                </el-table-column>
                <el-table-column
                        prop="reputation"
                        label="口碑评分"
                        align="center"
                        width="80">
                </el-table-column>
                <el-table-column
                        prop="movietypes[0].typename"
                        label="电影类型"
                        align="center">
                </el-table-column>

                <p/>
            </el-table>
            <el-table
                    :data="form"
                    style="width: 100%">
                <el-table-column
                        prop="moviedetails.moviesynopsis"
                        label="电影简介"
                        align="center">
                </el-table-column>
            </el-table>
            <el-table
                    :data="dlist"
                    style="width: 100%">
                <el-table-column
                        prop="directorname"
                        label="导演"
                        align="center">
                </el-table-column>
                <el-table-column
                        label="导演照片"
                        align="center">
                    <template slot-scope="scope">
                        <el-image
                                class="table-td-thumb"
                                referrer="no-referrer|origin|unsafe-url"
                                :src="scope.row.directorpicture"
                                :preview-src-list="[scope.row.directorpicture]"
                                style="-webkit-user-select: none;margin: auto;cursor:zoom-in;"
                        ></el-image>
                    </template>
                </el-table-column>
            </el-table>
            <el-table
                    :data="alist"
                    style="width: 100%">
                <el-table-column
                        prop="actorname"
                        label="演员"
                        align="center">
                </el-table-column>
                <el-table-column
                        label="演员照片"
                        align="center">
                    <template slot-scope="scope">
                        <el-image
                                class="table-td-thumb"
                                :src="scope.row.actorpicture"
                                :preview-src-list="[scope.row.actorpicture]"
                                style="-webkit-user-select: none;margin: auto;cursor:zoom-in;"
                        ></el-image>
                    </template>
                </el-table-column>
            </el-table>
            <el-table
                    :data="adlist"
                    style="width: 100%">
                <el-table-column
                        label="电影图集"
                        align="center">
                    <template slot-scope="scope">
                        <el-image
                                class="table-td-thumb"
                                :src="scope.row.picturepath"
                                :preview-src-list="[scope.row.picturepath]"
                                style="-webkit-user-select: none;margin: auto;cursor:zoom-in;"
                        ></el-image>
                    </template>
                </el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
            </span>
        </el-dialog>

    </div>
</template>

<script>
import { fetchData } from '../../api/index';
export default {
    name: 'Query_the_film.vue',
    data() {
        return {
            query: {
                type:'请选择',
                name:'',
                status:'请选择',
                currentPage:'',
                pageSize:''
            },
            statuslist:{},
            types:[],
            currentTotal: '',
            tableData: [],
            pageTotal: 0,
            multipleSelection: [],

            addVisible: false,
            editVisible: false,
            showMd: false,

            editform:{
                moviedetailsid:'',
                movieorigin:'',
                moviechinesename:'',
                movieforeignname:'',
                movieduration:'',
                editmoviereleasedata:'',
                moviesynopsis:''
            },
            edittype:{},

            addform:{
                addmoviechinesename:'',
                addmovieforeginname:'',
                addmovieduration:'',
                addmoviereleasedata:'',
                addmovieorigin:'',
                addmoviesynopsis:'',
                adddirectorname:'',
                adddirectorpicture:'',
                addactorname:'',
                addactorpicture:'',
                addatlas:'',
                addtype:'',
            },

            form: [],
            dlist:[],
            alist:[],
            adlist:[],
            director:'',
            actor:'',
            idx: -1,

            rules:{
                moviechinesename:[{ required: true, message: '必填项', trigger: 'blur' }],
                movieforeginname:[{ required: true, message: '必填项', trigger: 'blur' }],
                movieduration:[{ required: true, message: '必填项', trigger: 'blur' }],
                moviereleasedata:[{ required: true, message: '必填项', trigger: 'blur' }],
                movieorigin:[{ required: true, message: '必填项', trigger: 'blur' }],
                moviesynopsis:[{required: true, message: '必填项', trigger: 'blur' }],
            }
        };
    },
    created() {
        this.axios.get("api/movieDTO/movielist",null).then((data)=>{
            this.tableData = data.data.pageInfo.list;
            this.types = data.data.types;
            this.currentTotal = data.data.pageInfo.total;
            this.query.pageSize = data.data.pageInfo.pageSize;
            this.query.currentPage = data.data.pageInfo.pageNum;
        })
    },


    methods: {
        handlerefresh(){
            //alert(111)
            this.axios.get("api/movieDTO/movielist",null).then((data)=>{
                this.tableData = data.data.pageInfo.list;
                this.query.name = data.data.name;
                this.query.type = data.data.type;
                this.query.status = '';
                this.currentTotal = data.data.pageInfo.total;
                this.query.pageSize = data.data.pageInfo.pageSize;
                this.query.currentPage = data.data.pageInfo.pageNum;
            })
        },

        // 多选操作
        handleSelectionChange(val) {
            //alert(val)
            this.multipleSelection = val;
        },

        // 添加电影操作
        handleadd() {
            this.addVisible = true;
        },

        // 时间字符串的改变
        getTime(val) {
            const d = new Date(val);
            this.addform.addmoviereleasedata = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate();
        },

        geteditTime(val) {
            const d = new Date(val);
            this.editform.editmoviereleasedata = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate();
        },

        //确认添加方法
        confirmAdd(){
            this.axios
                .post("api/movieDTO/addmovie",
                    JSON.stringify(this.addform))
                .then((data)=>{
                if(data.data==1){
                    alert('添加成功！')
                    this.addVisible = false;
                    this.goList();
                }else if(data.data == 0){
                    alert("电影已存在，请勿重复添加！")
                    this.addVisible = false;
                    this.handlerefresh();
                }else{
                    alert("添加失败，请重新操作！")
                    this.addVisible = false;
                    this.handlerefresh();
                }
            })
        },

        //删除电影操作
        delAllSelection() {
            const length = this.multipleSelection.length;
            let str = '';
            for (let i = 0; i < length; i++) {
                str += this.multipleSelection[i].movieid + ' ';
            }
            if(str == null || str == '' ){
                this.$message.error(`请先勾选影片（可批量删除）`);
            }else{
                this.axios
                    .get("api/movieDTO/delmovie",{params:{str:str}})
                    .then((data)=>{
                    if(data.data>0){
                        this.$message.error(`删除了电影编号为${str}的电影`);
                        this.multipleSelection = [];
                        str = '';
                        this.goList();
                    }
                })
            }
        },


        //详情页面展示
        showMoviedetails(index, row){
            this.director = '';
            this.actor = '';
            this.idx = index;
            this.form[0] = row;
            var id = row.movieid;
            this.axios.get("api/movieDTO/showsinglemovie",{params:{id:id}}).then((data)=>{
                this.dlist = data.data.dlist;
                this.alist = data.data.alist;
                this.adlist = data.data.adlist;
                console.log(this.adlist)
            })
            this.showMd = true;
        },

        // 修改信息电影操作
        handleedit(index,row) {
            this.director = '';
            this.actor = '';
            var id = row.movieid;
            this.axios
                .get("api/movieDTO/findeditmovie",{params:{id:id}})
                .then((data)=>{
                this.editform = data.data.editmovie;
            })
            this.axios
                .get("api/movieDTO/showsinglemovie",{params:{id:id}})
                .then((data)=>{
                this.dlist = data.data.dlist;
                for(let i = 0;i<this.dlist.length;i++){
                    this.director += this.dlist[i].directorname+",";
                }
                this.alist = data.data.alist;
                for(let j = 0;j<this.alist.length;j++){
                    this.actor += this.alist[j].actorname + ",";
                }
            })
            this.edittype = row.movietypes[0].typename;
            this.editVisible = true;
        },

        //确认修改方法
        confirmEdit(){
            var editid = this.editform.moviedetailsid;
            console.log(this.editform)
            //alert(editid)
            this.axios
                .post("api/movieDTO/eidtmovie",JSON.stringify(this.editform))
                .then((data)=>{
                    if(data.data>0){
                        this.edittypemethod(editid);
                    }
            })
        },
        edittypemethod(num){
            this.axios
                .get("api/movieDTO/eidttype",{params:{edittype:this.edittype,num:num}})
                .then((d)=>{

                    if(d.data > 0){
                        alert('修改成功！')
                        this.editVisible = false;
                        this.actor = '';
                        this.director = '';
                        this.edittype = '';
                        this.goList();
                    }else{
                        alert("修改失败，请重新操作！")
                        this.editVisible = false;
                    }
                })
        },


        // 修改上下架操作
        handleEditstatusup(index,row){
            var status = row.moviestatus;
            var  id = row.movieid;
            var num = '';
            if(status == 1){
                alert("成功上架该片！目前为在映状态中...")
                num = 2;
            }else if(status == 2){
                alert("该片已为在映状态！请勿重复操作")
                num = 2;
            }else if(status == 3){
                alert("该片将重新上映(在映)")
                num = 2;
            }else if(status == 4){
                alert("该片在今日首映")
                num = 1;
            }
            this.axios.get("api/movieDTO/updataStatus",{params:{num:num,id:id}}).then(()=>{
                this.goList();
            })
        },
        handleEditstatusdown(index,row){
            var status = row.moviestatus;
            var  id = row.movieid;
            var num = '';
            if(status == 1){
                alert("成功下架该片！目前该片已为撤档状态...")
                num = 3;
            }else if(status == 2){
                alert("成功下架该片！目前该片已为撤档状态...")
                num = 3;
            }else if(status == 3){
                alert("无效操作，该片并未上映(首映/在映)！")
                num = 3;
            }else if(status == 4){
                alert("成功下架该片！目前该片已为撤档状态...")
                num = 3;
            }
            this.axios.get("api/movieDTO/updataStatus",{params:{num:num,id:id}}).then(()=>{
                this.goList();
            })
        },

        // 搜索
        handleBtnQuery() {
            this.goList();
        },

        //分页方法
        handleSizeChange(val) {
            this.query.pageSize = val;
            this.goList();
        },
        handleCurrentChange(val) {
            this.query.currentPage = val;
            this.goList();
        },
        //封装的方法
        goList(){
            this.axios.get("api/movieDTO/movielist",{params:this.query}).then((data)=>{
                this.tableData = data.data.pageInfo.list;
                this.query.name = data.data.name;
                this.query.type = data.data.type;
                this.currentTotal = data.data.pageInfo.total;
                this.query.pageSize = data.data.pageInfo.pageSize;
                this.query.currentPage = data.data.pageInfo.pageNum;
            })
        }
    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>
